<template>
  <div class="p-2">
    <el-card shadow="never">
      <div style="display: flex; align-item: center">
        <div>
          <el-button @click="goBack()">取消</el-button>
        </div>
        <div style="margin-left: 10px">
          <el-button type="primary" @click="submitForm()">保存</el-button>
        </div>
      </div>
    </el-card>

    <el-card shadow="never" style="height: 78vh; overflow-y: auto; margin-top: 10px">
      <div style="display: flex">
        <div style="flex: 1">
          <el-form ref="farmFormRef" v-loading="loading" :disabled="routeParams.type === 'view'" :model="form" :rules="rules" label-width="120px">




            <el-form-item label="坐标" prop="coordinate">
              <el-input v-model="form.coordinate" type="text" placeholder="自动生成" disabled />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <editor v-model="form.remark" :min-height="192" />
            </el-form-item>
            <el-form-item label="显示顺序" prop="sequence">
              <el-input-number v-model="form.sequence"  placeholder="请输入" />
            </el-form-item>
            <el-form-item v-if="form.id" label="状态">
              <el-switch v-model="form.status" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div style="flex: 1; margin-left: 20px">
          <AmapMarker @change="handleMarkerChange" :selMarker="form.coordinate"/>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup name="edit" lang="ts">
import { addAirview, getAirviewDetail, updateAirview } from '@/api/data/index';
import { AirviewQuery, AirviewForm } from '@/api/data/types';

import EnhancedRadioGroup from '@/components/elRadio/myElRadio.vue';
import AmapMarker from '@/components/map/AmapMarker.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const buttonLoading = ref(false);
const loading = ref(false);

//路由参数
const routeParams = ref<Record<string, any>>({});

const departList = ref<DepartVO[]>([]);

const farmFormRef = ref<ElFormInstance>();
const flowCode = ref<string>('');
const initFormData: AirviewForm = {
  id: undefined,
  code: undefined,
  name: undefined,

};

const data = reactive<PageData<AirviewForm, AirviewQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNo: 1,
    pageSize: 10,
  },
  rules: {
    // id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],


  }
});


const { form, rules } = toRefs(data);

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };

  farmFormRef.value?.resetFields();
};

/** 获取详情 */
const getInfo = () => {
  loading.value = true;
  buttonLoading.value = false;
  nextTick(async () => {
    //获取详情
    const res = await getAirviewDetail(routeParams.value.id);
    const { data } = res;
    Object.assign(form.value, data);
    // console.log('detail------farm',form.value)
    loading.value = false;
    buttonLoading.value = false;
    //设置电子围栏坐标
  });
};

/** 提交按钮 */
const submitForm = (status: string) => {
  try {
    farmFormRef.value?.validate(async (valid: boolean) => {
      console.log('------------valid', valid);
      if (valid) {
        buttonLoading.value = true;
        form.value.id ? await updateAirview(form.value) : await addAirview(form.value);

        proxy?.$modal.msgSuccess('提交成功');
        submitCallback();
      }
    });
  } finally {
    buttonLoading.value = false;
  }
};

//提交回调
const submitCallback = async () => {
  await proxy.$tab.closePage(proxy.$route);
  proxy.$router.go(-1);
};

//返回
const goBack = () => {
  proxy.$tab.closePage(proxy.$route);
  proxy.$router.go(-1);
};


const handleMarkerChange = (value) => {
  console.log('保存的坐标:', JSON.stringify(value));

  form.value.coordinate = JSON.stringify(value);
};
onMounted(() => {
  nextTick(async () => {
    routeParams.value = proxy.$route.query;
    reset();
    loading.value = false;
    if (routeParams.value.id) {
      form.value.id = routeParams.value.id;
      //详情
      getInfo();
    }



  });
});
</script>
